<template>
    <div class="hub">
        <div class="caovas" @drop="drop" @dragover="ondragover" ref="center">
            <component v-for="(item, index) in canvasComponents" :key="index" :id="item.id" is="MyButton"
                :style="item.style" :imgsrc="item.imgsrc" :event="item.event">
            </component>
        </div>
    </div>
</template>


<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import arr from '../utils/icondata'
import deepCopy from '../utils/deeyCopy'
//在用@符手打断;
import { nanoid } from 'nanoid'
import { useComponents } from '../stores/counter'
import { storeToRefs } from 'pinia';
const { canvasComponents, currentcom }: any = storeToRefs(useComponents())
const { setCurrentComponents, setCurrentCom, setStyle } = useComponents()
const center = ref()
//导入画布
import { useCanvasStore } from '../stores/index'
const { setCanvasDom, setshow } = useCanvasStore()
//拖着你进入画布
const ondragover = (e: any) => {

    console.log(2222)
    e.preventDefault();

}
const drop = (e: any) => {
    console.log(111111)
    e.preventDefault()
    const index = e.dataTransfer.getData('index')
    console.log(index, 'index');

    // let obj = arr.value[index]
    // let res = deepCopy(obj)
    // res.id = nanoid()
    // res.style.left = e.offsetX,
    //     res.style.top = e.offsetY
    // res.style.zIndex = canvasComponents.value.length
    // setCurrentComponents(res)
    // setCurrentCom(res.id)
    // setshow(false)
}
</script>
<style lang="scss" scoped></style>
